<template>
  <div class="join" ref="join">
    <div class="j-text">
      <p>初次相遇，总是难以忘怀</p>
      <p>你第一次使用iChangan是</p>
      <p class="keyword">{{ props.stats?.joinAttendance }}</p>
    </div>
    <img class="j-button" src="@/assets/img/join/bg-bt.png" alt="" />
    <img class="j-hand" src="@/assets/img/join/bg-hand.png" alt="" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

import { slideUp, slideDown } from "../../../../utils/slide";

const props = defineProps<{
  stats: any;
}>();

const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(() => {
  slideUp(join.value, () => {
    console.log("ichangan");
    emit("slideUp");
  });
  slideDown(join.value, () => {
    emit("slideDown");
  });
});

const join = ref<any>(null);

// const firstPunchCardTime = ref("2022年12月22日");
</script>

<script lang="ts">
export default {
  name: "JoinPage",
};
</script>

<style lang="scss" scoped>
.join {
  @include full-screen-relative;
}

.j-text {
  @include animation-fade-in;
  position: absolute;
  left: $text-left;
  top: 1014px;
  z-index: 999;
  font-size: $font-size-normal;
  font-family: ChangAnunitype;
  font-weight: 400;
  color: #ffffff;
  line-height: $line-height-normal;

  .keyword {
    margin-top: 20px;
  }

  /* .year {
    margin-top: 20px;
    font-size: 36px;
    font-weight: bold;
  } */
}

.j-button {
  @include animation-move-right;
  position: absolute;
  top: 60px;
  left: 0;
  height: 860px;
  width: 699px;
}

.j-hand {
  @include animation-move-left;
  position: absolute;
  top: 202px;
  right: 0;
  height: 305px;
  width: 444px;
}</style>
